<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="3" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">客户&nbsp;&nbsp;/</router-link>
              <router-link to="/">客户加盟</router-link>
            </el-col>
          </div>
        </el-row>
        <div class="contents">
          <el-row>
            <el-col :span="3">
              <input type="search" class="search" placeholder="请输入手机号码/公司名称">
            </el-col>
            <el-col :span="2" :offset="2">
              <el-form ref="form" :model="form" class="contents-form">
                <el-form-item class="form-item">
                  <el-select v-model="value" placeholder="请选择审核状态" class="select-style">
                    <el-option label="区域一" value="shanghai"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2" :offset="15">
              <el-form>
                <router-link to="/">
                  <div class="contents-add-plus">
                    <img src="./../../../../static/images/marting-plus.png" width="15" height="15">
                    <p style="padding-left:3px">新增</p>
                  </div>
                </router-link>
              </el-form>
            </el-col>
          </el-row>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            class="tableData"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="手机号码" width="120"></el-table-column>
            <el-table-column prop="address" label="申请时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="公司名称" width="120"></el-table-column>
            <el-table-column prop="address" label="联系人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="职位" width="120"></el-table-column>
            <el-table-column prop="address" label="所在地区" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="加盟原因" width="120"></el-table-column>
            <el-table-column prop="address" label="营业执照" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="审核状态" width="120"></el-table-column>
            <el-table-column prop="address" label="邀请人" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      form: {
        region: ''
      },
      value: '',
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
  .header {
    height: 45px;
    .header-nav {
      line-height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
      span {
        display: inline-block;
        margin-left: 10px;
      }
      a {
        color: #999999;
      }
      a:hover {
        color: #20ade5;
      }
    }
  }
}
.header-nav > a:last-child {
  color: #333 !important;
}
.header-nav > a:last-child:hover {
  color: #333;
}
.contents {
  width: calc(100% - 20px);
  height: 500px;
  background-color: #fff;
  padding: 10px 0px 0px 0px;
}
.search {
  border: 1px solid #dcdfe6;
  width: 240px;
  height: 38px;
  margin-top: 2px;
  text-indent: 1em;
}
.search::placeholder {
  color: #c0c4cc;
}
.contents /deep/ .el-row {
  padding: 15px 0px 0px 25px;
  background-color: #fff;
  font-size: 12px;
  .select-style /deep/ .el-input__inner {
    height: 37px;
    border-radius: 0;
    width: 130px;
    font-size: 12px;
  }
}
.contents-add-plus {
  display: flex;
  font-size: 15px;
  color: #20ade5;
  margin-top: 10px;
}
.tableData /deep/ th {
  background-color: #fcfcfc;
  font-weight: normal;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
</style>
